<template>
	<view class="mian">
		<!-- #ifdef MP-WEIXIN -->
		<navbar :bgColor="bgColors" :btnColors='btnColor' title="个人信息" :isGoBack="true" :isNotice="true" :visible="true" ></navbar>
		<!-- #endif -->
		<view class="member_set">			
			
			<view class="flex justify-between  tag_text border-b  align-center text-center pt-30 pb-30 pl-30 pr-30" @click="upload(2)">
				<view class="flex text-lg">
					<text style="color: #222222 ;">头像 </text>
				</view>
				<view class="flex">
					 <u-avatar :src="wx_icon" shape="circle"></u-avatar>
					 <u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"></u-icon>
				</view>				 
			</view>	
			
			<view class="flex justify-between  tag_text border-b  align-center text-center pt-30 pb-30 pl-30 pr-30" @click="setmember(1)">
				<view class="flex text-lg">
					<text style="color: #222222 ;">昵称</text>
				</view>
				<view class="flex">
					<text class="mr-20" style="color:#222222;">{{nickname}}</text>
					<u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"></u-icon>
				</view>				 
			</view>		
			
			<view class="flex justify-between  tag_text border-b  align-center text-center pt-30 pb-30 pl-30 pr-30" @click="setgender">
				<view class="flex text-lg">
					<text style="color: #222222 ;">性别</text>
				</view>
				<view class="flex">
					<text class="mr-20" style="color:#222222;">{{gender}}</text>
					<u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"></u-icon>
				</view>				 
			</view>	
			
			<view class="flex justify-between  tag_text border-b  align-center text-center pt-30 pb-30 pl-30 pr-30" @click="setage">
				<view class="flex text-lg">
					<text style="color: #222222 ;">年龄</text>
				</view>
				<view class="flex">
					<text class="mr-20" style="color:#222222;">{{age}}</text>
					<u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"></u-icon>
				</view>				 
			</view>	
			
			
			<view class="flex justify-between  tag_text border-b  align-center text-center pt-30 pb-30 pl-30 pr-30" @click="setheight">
				<view class="flex text-lg">
					<text style="color: #222222 ;">身高</text>
				</view>
				<view class="flex">
					<text class="mr-20" style="color:#222222;">{{heights}}</text>
					<u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"></u-icon>
				</view>				 
			</view>	
			
			<view class="flex justify-between  tag_text border-b  align-center text-center pt-30 pb-30 pl-30 pr-30" @click="setweight">
				<view class="flex text-lg">
					<text style="color: #222222 ;">体重</text>
				</view>
				<view class="flex">
					<text class="mr-20" style="color:#222222;">{{weights}}</text>
					<u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"></u-icon>
				</view>				 
			</view>	
			
			
			<view class="flex justify-between  tag_text border-b  align-center text-center pt-30 pb-30 pl-30 pr-30" @click="setbeill">
				<view class="flex text-lg">
					<text style="color: #222222 ;">患病情况</text>
				</view>
				<view class="flex">
					<text class="mr-20" style="color:#222222;">{{beill}}</text>
					<u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"></u-icon>
				</view>				 
			</view>	
			
			
			<view class="flex justify-between  tag_text border-b  align-center text-center pt-30 pb-30 pl-30 pr-30" @click="setDrug">
				<view class="flex text-lg">
					<text style="color: #222222 ;">用药情况</text>
				</view>
				<view class="flex">
					<text class="mr-20" style="color:#222222;">{{drug}}</text>
					<u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"></u-icon>
				</view>				 
			</view>	
			
			
		
			
		</view>
		
		
		
		<view class="submit" @click="dosignup()">
			<view class="btnsub wrap">
				保存
			</view>
		</view>	  
		
		
		
		<!-- 	设置性别 -->
		<u-popup :show="is_gender" @close="gender_close"  mode="center" :round="10">
			<view class="goods_list">
				<view class="flex close_icon" @click="gender_close">
					<image src="../../../static/resource/close.png" style="width: 74px;height: 30px;"></image>
				</view>
				<view class="flex flex-direction mt-30 align-center text-center">
					<view class="flex gender" @click="gender_sets('男')" :class="[gender_set=='男'?'gender_select':'']">
						<text>男</text>
					</view>
					<view class="flex gender mt-20" @click="gender_sets('女')" :class="[gender_set=='女'?'gender_select':'']">
						<text>女</text>
					</view>
				</view>	
				
				<view class="flex justify-between ml-80 mr-80 mt-30">
					<view class="flex gender_cencel" @click="gender_close">
						<text>取消</text>
					</view>
					<view class="flex gender_sure" @click="gender_sure">
						<text>确定</text>
					</view>
				</view>
			</view>				
		</u-popup>	
		
		<!-- 身高- -->
		<u-picker
		  :show="heightshow"
		  :columns="[columns]"
		  title="选择身高"
		  @confirm="heightConfirm"
		  @cancel="heightshow = false"
		></u-picker>
		
		<!-- 体重 -->
		<u-picker
		  :show="weightshow"
		  :columns="[columns_weight]"
		  title="体重"
		  @confirm="weightConfirm"
		  @cancel="weightshow = false"
		></u-picker>
		
		
		<!-- 患病情况 -->
		<u-picker
		  :show="beillshow"
		  :columns="columns_beill"
		  title="患病情况"
		  @confirm="beillConfirm"
		  @cancel="beillshow = false"
		></u-picker>
		
	<!-- 	用药情况 -->
		<u-picker
		  :show="drugshow"
		  :columns="drugs_beill"
		  title="用药情况"
		  @confirm="drugsConfirm"
		  @cancel="drugshow = false"
		></u-picker>
		
		<!-- 	年龄 -->
			<u-picker
			  :show="ageshow"
			  :columns="[ageshow_beill]"
			  title="年龄"
			  @confirm="ageshowConfirm"
			  @cancel="ageshow = false"
			></u-picker>
		
	</view>
</template>

<script>
	export default {
		data () {
			return {
				...getApp().globalData.config,
				bgColors:"#ffffff",
				nickname:'',
				wx_icon: "https://yomeedoll.qifudaren.net/static/upload/3898f5717615396e/5bc141f9e3c86501.png",				
				gender: '男', // 默认性别				
				heights:'170厘米',//身高---
				weights:'120斤',//体重----
				beill:'无',
				drug:'无',
				age:28,
				gender_set: '男', // 默认性别
				
				birthday: '', // 默认生日
				userInfo:"",
				is_gender:false,
				heightshow: false,
				weightshow: false,
				beillshow: false,
				drugshow:false,
				ageshow:false,
				columns: Array.from({ length: 21 }, (_, i) => `${160 + i}厘米`), // 160~180cm
				columns_weight:Array.from({ length: 61 }, (_, i) => `${110 + i}斤`), // 160~180cm
				columns_beill:[
				  ['无', '糖尿病', '高血压', '糖尿病+高血压']
				],
				drugs_beill:[
				  ['无', '降压药', '降糖药', '降压药+降糖药']
				],
				ageshow_beill:Array.from({ length: 50 }, (_, i) => `${18 + i}`), // 160~180cm
				
			}
		},
		onLoad(options){
			if(options.type==1){
				this.nickname=options.value
				let user_info=uni.getStorageSync('userInfo');
				this.userInfo.phone=user_info.phone
			} 
			if(!options.type){
				console.log('options-1',options)
				 this.query_member()
			}
		},
		onShow(){
			let user_info=uni.getStorageSync('userInfo');
			this.userInfo=user_info
		},
		
		methods:{	
			//设置年龄
			setage(){
				this.ageshow = true
			},
			ageshowConfirm(e){
				this.age = e.value[0]
				 console.log('e', e.value[0])
				this.ageshow = false
			},
			
			//设置用药情况
			 drugsConfirm(e) {
				
			      this.drug = e.value[0]
				   console.log('e', e.value[0])
			      this.drugshow = false
			},
			//设置用药情况
			setDrug(){
				console.log('ok---')
				this.drugshow = true
			},
			
			
			
			//设置患病情况
			 beillConfirm(e) {
				
			      this.beill = e.value[0]
				   console.log('e', e.value[0])
			      this.beillshow = false
			},
			//设置患病情况
			setbeill(){
				console.log('ok---')
				this.beillshow = true
			},
			
			
			
			//设置身高
			 weightConfirm(e) {
			      this.weights = e.value[0]
				   console.log('e', e.value[0])
			      this.weightshow = false
			},
			//设置体重
			setweight(){
				console.log('ok---')
				this.weightshow = true
			},
			
			
			
			//设置身高
			 heightConfirm(e) {
			      this.heights = e.value[0]
			      console.log('选择的身高：', this.height)
			      this.heightshow = false
			},
			//设置身高
			setheight(){
				console.log('ok')
				this.heightshow=true
			},
			//设置性别
			setgender(){
				this.is_gender=true
			},
			//关闭性别
			gender_close(){
				this.is_gender=false
			},
			//设置性别
			gender_sets(gender){
				this.gender_set=gender				
			},
			gender_sure(){
				this.gender=this.gender_set	
				this.is_gender=false
			},			
			
			//获取用户信息
			query_member(){
				let user_info=uni.getStorageSync('userInfo');
				let that=this;
				if(user_info){
					let obj_data={
						token:user_info.token,
					};
					this.$http.getUser(obj_data).then(res=>{				
						if(res.resCode=='9999'){
							uni.setStorageSync('userInfo',res.data);	
						    that.userInfo=res.data
							this.gender=res.data.gender
							this.nickname=res.data.nickName
							this.wx_icon=res.data.wx_icon
							this.heights=res.data.heights
							this.weights=res.data.weights
							this.drug=res.data.drug
							this.beill=res.data.beill
							this.age=res.data.age
						}				
					})				
				}
			},
			upload(type){
					let that=this
					// 选择图片
					uni.chooseImage({
					  count: 1, // 默认9，设置图片的数量
					  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					  success: function (res) {
						// 成功选择图片后
						const filePath = res.tempFilePaths[0]; // 获取文件路径						
						let url=that.api_url+"index/uploadImages";
						 console.log('url',url)
						// 上传图片
						uni.uploadFile({
						  url: url, // 服务器上传接口地址
						  filePath: filePath,
						  name: 'file', // 必须填写，后台用来接收文件
						  formData: {},
						  success: function (res) {
							var tem = JSON.parse(res.data)
							console.log('22',tem.data.image)
							  that.wx_icon=tem.data.image
						  },
						  fail: function (uploadFileErr) {
							console.log(uploadFileErr); // 上传失败的回调
						  }
						});
					  },
					  fail: function (chooseImageErr) {
						console.log(chooseImageErr); // 选择图片失败的回调
					  }
					});
				},
				
			handleGenderChange(e) {
			  this.gender = e.detail.value;
			},
			
			
			handleBirthdayChange(e) {
			  this.birthday = e.detail.value;
			},
			//设置信息
			setmember(type){
				let obj={
					nickname:this.nickname,
					wx_icon:this.wx_icon,
					gender:this.gender,
					
					birthday:this.birthday,
									
				}
				console.log(obj)
				
				let val=JSON.stringify(obj)
				this.$routers.router('/pages/pagesuser/member_set/setmember?type='+type+'&val='+val,'redirectTo') 
			},
			//保存信息
			dosignup(){
				let obj_data={
					nickName:this.nickname,
					wx_icon:this.wx_icon,
					gender:this.gender,
					heights:this.heights,
					weights:this.weights,
					beill:this.beill,
					drug:this.drug,
					age:this.age,
					token:uni.getStorageSync('userInfo').token										
				}					
				this.$http.memberset(obj_data).then(res=>{
					if(res.resCode=='9999'){
						uni.showToast({title:'操作成功~',icon:'none'})
						setTimeout(()=>{
								this.$routers.router('/pages/mine/index','switchTab') 			  
						},2000) 						
						
					}else{
						uni.showToast({title:res.resMessage,icon:'none'})
					}				
				})	
			}
		}
	}
</script>

<style>
	page{
		background-color: #ECF0F6;;
	}
	.gender_sure{
		display: flex;
		width: 89px;
		height: 44px;
		justify-content: center;
		align-items: center;
		text-align: center;
		background: linear-gradient(180deg, #8CB6FE 0%, #3484E6 28.08%);
		border-radius: 10px;
		color: #fff;
	}
	.gender_cencel{
		display: flex;
		width: 89px;
		height: 44px;
		justify-content: center;
		align-items: center;
		text-align: center;
		background: linear-gradient(180deg, #D7DDE6 0%, #868C95 28.08%);
		border-radius: 10px;
		color: #fff;
	}
	.gender_select{
		background-color: #ECF0F6;
	}
	.gender{
		width: 252px;
		height: 50px;
		padding: 10px;
		justify-content: center;
		align-items: center;
		text-align: center;
		border: 1px solid #EAEAEA;
		border-radius: 10px;
		
	}
	.goods_list{
		 display: flex;
		 width: 344px;
		 flex-direction: column;
		 position: relative;
		 /* padding-bottom: 110rpx; */
	}
	
	 .close_icon{
		 padding-top: 30rpx;
		 padding-left: 30rpx;
		 padding-bottom: 20rpx;
		 border-bottom: 2rpx solid  #EAEAEA;
	 }
	 
	 
	.copy{
		font-weight: bold;
		font-size: 30rpx;
		color: #518FA0;
	}
	.member_set{
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		background-color: #fff;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	
	.submit{
		width: 100%;
		position: fixed;
		bottom: 0px;
		height: 90px;
		padding: 12px;
		box-sizing: border-box;
		background: #fff;
		
	}
	.btnsub{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: #fff;
		background: #3484E6;
		border-radius: 62rpx;
		height: 44px;
	}
	
</style>